<template>
  <div class="home">
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2500363_5hg63hitnpb.css"
    />
    <nav>
      <div class="div">
        <img
          src="https://www.escook.cn/vue-shop/img/heima.b5a855ee.png"
          alt=""
        />
        电商后台管理系统
      </div>

      <div class="btn"><el-button type="info" @click="out">退出</el-button></div>
    </nav>
    <div class="box">
      <el-menu
        :router="true"
        text-color="#e8e8e8"
        background-color="#333744"
        default-active="1-4-1"
        class="el-menu-vertical-demo k1"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :unique-opened="true"
      >
      <div class="span" @click="isCollapse =!isCollapse">|||</div>
        <!-- ------------------------------------------------- -->
        <el-submenu index="1">
          <template slot="title">
            <i class="iconfont icon-yonghuguanli"></i>
            <span slot="title"> 用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/users">
              <i class="el-icon-menu"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- ------------------------------------------------- -->
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-quanxian"></i>
            <span slot="title"> 权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/roles">
              <i class="el-icon-menu"></i>
              <span slot="title">角色列表</span>
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/home/rights">
              <i class="el-icon-menu"></i>
              <span slot="title">权限列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- ------------------------------------------------- -->
        <el-submenu index="3">
          <template slot="title">
            <i class="iconfont icon-shangpin"></i>
            <span slot="title"> 商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/goods">
              <i class="el-icon-menu"></i>
              <span slot="title">商品列表</span>
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/home/params">
              <i class="el-icon-menu"></i>
              <span slot="title">分类参数</span>
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/home/categories">
              <i class="el-icon-menu"></i>
              <span slot="title">商品分类</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- ------------------------------------------------- -->
        <el-submenu index="4">
          <template slot="title">
            <i class="iconfont icon-layer"></i>
            <span slot="title"> 订单管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/orders">
              <i class="el-icon-menu"></i>
              <span slot="title">订单列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- ------------------------------------------------- -->
        <el-submenu index="5">
          <template slot="title">
            <i class="iconfont icon-xitongguanli"></i>
            <span slot="title"> 数据统计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/reports">
              <i class="el-icon-menu"></i>
              <span slot="title">数据列表</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- ------------------------------------------------- -->
      </el-menu>
      <router-view class="k2"></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "home_s",
  data() {
    return {
      isCollapse: false,
    };
  },
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登录
  out(){
    sessionStorage.removeItem('user')
    this.$router.push({path:'/'})
  }
},
};
</script>
 
<style lang = "scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 231px;
  height: 100%;
  min-height: 400px;
}
.home {
  width: 100%;
  height: 100%;
  nav {
    width: 100%;
    line-height: 60px;
    background-color: #373d41;
    justify-content: space-between;
    color: white;
    font-size: 22px;
    display: flex;
    box-sizing: border-box;
    padding: 0 20px;
    .div {
      display: flex;
    }
    img {
      margin-right: 15px;
    }
    .btn {
    }
  }
  .box {
    width: 100%;
    height: 94%;
    display: flex;
 
    .k2{
      overflow: auto;
      flex: 8;

    }
    .span{
      text-align: center;
      color: white;
      background-color: #4a5064;
      width: 100%;
      line-height: 35px;
    }
  }
}
</style>